La page de Michel GRIMALDI

Comprendre une application graphique Qt minimale

Le but de ce post est d'expliquer la signification exacte des différents fichiers constituant une application graphique Qt. La compréhension des notions utilisées (classe, objet, héritage, ...) suppose que le lecteur ait déjà acquis quelques notions de base de la Programmation Orientée Objet. Les exemples données ci-dessous sont basés sur l'environnement de programmation intégré QtCreator que vous pouvez télécharger ici.

Pour commencer:

  • lancer QtCreator et créer une application Graphique avec Widget (Fichier, Nouveau Fichier ou Projet ...)
  • spécifiez le nom, par exemple mon-projet, et l'emplacement de votre choix (un dossier sera créé, il contiendra la totalité du projet)
  • choisissez le kit Desktop pour l'instant (programme sur le PC) d'autres posts à venir présenteront les applications Qt sous Android.
  • donnez le nom MaFenetre à la classe de base, choisissez QWidget pour la classe parent et laissez les noms de fichiers qu'il aura choisi, en fonction de la version de QtCreator, vous devez avoir une fenêtre de dialog ressemblant à ça: dialogue
  • terminez la création du projet

A ce stade, vous avez créé un projet Qt qui vous permettra de générer votre application finale. Vous pouvez dés à présent l'exécuter, symbole vert en bas à gauche (play), et observer le résultat (une fenêtre vide doit s'ouvrir, c'est votre première application!)

Votre projet est constitué de 5 fichiers comme suit, que nous allons expliquer un à un:

dialogue

Tout d'abord le fichier de projet: mon-projet.pro

#-------------------------------------------------
#
# Project created by QtCreator 2015-05-01T11:22:58
#
#-------------------------------------------------

QT       += core gui
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = mon-projet
TEMPLATE = app

SOURCES += main.cpp\
    mafenetre.cpp
HEADERS  += mafenetre.h
FORMS    += mafenetre.ui

Ce fichier décrit votre application, à savoir qu'elle utilise les composants Qt de base (core), les composants graphiques (gui), Le nom de l'exécutable (TARGET) sera mon-projet. Elle sera constituée de deux fichiers sources (SOURCE) main.cpp et mafenetre.cpp, d'un fichier d'entête (HEADERS) mafenetre.h, et enfin d'un fichier de description graphique de l'interface FORMS mafenetre.ui.

Le fichier d'entête de déclaration de la classe principale mafenetre.h

#ifndef MAFENETRE_H
#define MAFENETRE_H

#include <QWidget>

namespace Ui {
class MaFenetre;
}

class MaFenetre : public QWidget
{
    Q_OBJECT

public:
    explicit MaFenetre(QWidget *parent = 0);
    ~MaFenetre();

private:
    Ui::MaFenetre *ui;
};

#endif // MAFENETRE_H

Vous devez reconnaître la déclaration d'une classe MaFenetre héritée de la classe QWidget, class MaFenetre : public QWidget la première représente la fenêtre principale de votre application la seconde une fenêtre d'interface de base, un Widget.

Pour l'instant, puisque nous n'avons rien rajouté ni redéfini dans cette classe, si l'on exécute le programme, nous pouvons avoir une idée de ce qu'est un QWidget.

Vous reconnaîtrez également la déclaration du constructeur explicit MaFenetre(QWidget *parent = 0);, une méthode qui a le même nom que la classe, et du destructeur ~MaFenetre();nous reviendrons dessus plus loin.

Enfin, la ligne Ui::MaFenetre *ui; déclare un attribut, privé, qui représente l'interface utilisateur, user interface. C'est cet attribut qui contiendra tous les éléments que vous allez définir au moyen du designer Qt designer et qui sera sauvé dans le fichier mafenetre.ui.

Le fichier d'implémentation de la classe mafenetre.cpp

#include "mafenetre.h"
#include "ui_mafenetre.h"

MaFenetre::MaFenetre(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::MaFenetre)
{
    ui->setupUi(this);
}

MaFenetre::~MaFenetre()
{
    delete ui;
}

C'est ici que vous allez devoir écrire le code c++ constituant les méthodes de la classe. Pour l'instant il ne contient que l'implémentation du constructeur et du destructeur. Le premier initialise l'interface ui->setupUi(this);, le second libère la mémoire utilisée pour l'interface delete ui;.

Le fichier de description de l'interface mafenetre.ui

Plutôt que de faire des longs discours, je vous propose de faire un double click dessus et de découvrir par vous même:

  • l'outils Qt Designer se lance. Il vous permettra de construire le dessin, design, de votre interface en faisant glisser les composants de votre choix (QLabel, QPushButton, QLineEdit, .etc.). Nous allons par exemple ajouter un QLabel (faire glisser et poser), en bas à droite, vous pouvez modifier à souhait toutes les propriétés de ce Label, son nom objectName, sa police de caractère font, son contenu text mettez y le texte "Bonjour" par exemple, et plein d'autres.

  • lancer l'application et regardez le résultat.

dialogue

  • rajouter un bouton QPushButton dont le texte, attribut text, contient "Ok".
  • avec un click droit sur ce bouton, puis aller au slot choisir l'action clicked (on a clické sur le bouton). Vous vous retrouvez dans une nouvelle méthode, créée pour l'occasion, qui sera exécutée quand vous clickerez sur le bouton.
void MaFenetre::on_pushButton_clicked()
{

}

insérez la ligne de code suivant, dans cette fonction:

ui->label->setText("Salut...");
  • lancer l'application et regardez le résultat.

le programme principal à proprement dit, main.cpp

Bien sûr, c'est lui qui s'exécute en premier et qui lance la partie graphique, mais en général on s'en soucie peu quand on développe sous Qt.

#include "mafenetre.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MaFenetre w;
    w.show();

    return a.exec();
}

Le lancement consiste à instancier un objet a de la classe QApplication, un objet w de la classe Mafenetre (qui représente comme vous l'avez vu l'essentiel de notre application), et enfin d'appeler la méthode show() de ce dernier (la fenêtre apparaît alors avec toutes ses fonctionalités).

La méthode a.exec() lance un thread principal d'évènement, nous reviendrons sur cette notion plus tard. Pour faire simple, disons que le programme reste actif, pour permettre de répondre aux actions que nous allons faire, tant que la fenêtre pricinpale reste ouverte.

Voilà, vous avez développé votre première application graphique Qt. Elle n'est pas sensationnelle mais c'est un bon début.

Pour aller plus loin, d'autres post viendront.